<template>
  <div ref="chartRef" style="height: 100%;">

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import webapi from '@/api/webapi.js';
import * as echarts from 'echarts';
import utils from '@/assets/utils.js'
import useWarehouseStore from '@/stores/warehouse.js';
const warehouseStore = useWarehouseStore();

const chartRef = ref(null);

onMounted(() => {
  var myChart = echarts.init(chartRef.value, '');
  var option;

  option = {
    title: {
      text: '库龄汇总',
      left: 'center',
      top: 0.5 * utils.fontSizeRem(),
      textStyle: {
        fontSize: utils.fontSizeRem(),
        color: '#ffffff',
      }
    },
        legend: {
          bottom:utils.fontSizeRem(),
          textStyle: {
            fontSize: 9,
          },
          itemWidth:10
        },
    series: [
      {
        type: 'pie',
        radius: '40%',
        data: [],
        label: {
          formatter: '{b}\n{d}%', // 显示标签名称和百分比
          fontSize: 0.75 * utils.fontSizeRem()
        },
        labelLine: {
          length: 0.5 * utils.fontSizeRem(),
          length2: 0.5 * utils.fontSizeRem(),
        }
      }
    ]
  };
  myChart.setOption(option);

  setTimeout(() => {
    fetchData(myChart)
  }, 8000);
});

function fetchData(myChart) {
  webapi.post('/storage/stockeage', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    var data = [
      { name: '半年以内', value: response.data.lessthanhalfyearcount },
      { name: '半年至一年', value: response.data.lessthanoneyearcount },
      { name: '一年至两年', value: response.data.lessthantwoyearcount },
      { name: '两年以上', value: response.data.overtwoyearcount },
    ]

    myChart.setOption({
      series: [
        {
          data: data
        }
      ]
    })
  });

  setTimeout(() => {
    fetchData(myChart)
  }, 8 * 60 * 60 * 1000);
}
</script>
